<template>
	<view class="bg-white">
		<view v-if="addressList.length!=0">
			<!-- 头部 -->
			<view class="caozuo">
				<!-- 全选按钮 -->
				<view>
					<checkbox-group @change="changeAll">
						<checkbox :checked="isChecked" :class="isChecked==true?'checked':''" class="round sx-check" style="margin-right: 12upx;"></checkbox>
						<text style="font-weight: bold;font-size: 90%;">全选</text>
					</checkbox-group>
				</view>
				<!-- 删除按钮 -->
				<view>
					<view class="cu-btn sm round"><text class="cuIcon-deletefill" style="margin-right:6upx;" @click="delSelected">删除</text></view>
				</view>
			</view>
			
			<!-- 地址信息 -->
			<view class="cuIcon-card">
				<view v-for="(item,index) in addressList" :key="index" style="border-top: #D8D8D8 dashed 2upx;" class="card-item bg-white">
					<!-- 左部 -->
					<view class="flex justify-between align-center" style="margin-left: 10upx;">
						<checkbox :checked="item.checked" :class="item.checked==true?'checked':''" class="round sx-check" style="margin-right: 12upx;" @click="itemSelect(item)"></checkbox>
					</view>
					<view class="cart-ycontent" style="width:700upx ;">
						<!-- 配送地址编写 -->
						<view class="flex bg-white flex-direction" style="margin-left: 20upx;">
							<!-- 上部 -->
							<view class="flex" style="margin-bottom: 20upx; margin-top: 30upx;">
								<view v-if="item.defaultStatus == 1" class="cu-tag sm bg-red">默认</view>
								<view style="font-size: 110%; margin-left: 5upx;font-weight: 500;color: gray;">{{item.province}}{{item.city}}</view>
							</view>
							<!-- 下部 -->
							<view class="flex justify-between" style="height: 70upx;">
								<view class="text-bold text-lg text-black">{{item.detailAddress}}</view>
								<view style="padding-right: 20upx;" @tap="editAddress(item)"><text class="cuIcon-edit" style="font-size: 200%;"></text></view>
							</view>
							<view style="font-size: 110%">
								<text>{{item.name}}</text>
								<text style="margin-left: 50upx;">{{item.phone}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 新增收获地址 -->
			<view class="cu-btn round bg-red barfixed" style="width: 700upx; height: 100upx;color: white; font-size: 150%; margin: 20upx;"
			 @tap="addAddress">+ 新增收获地址</view>
		</view>
		<!-- 无历史记录-->
		<view v-else>
			<view style="font-size: 200%; text-align: center; margin-top: 500upx; background-color: #DDDDDD;" class="round">暂无搜索记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [],
				targetList:[],
				isChecked: true,
				memberId: undefined
			}
		},
		onLoad(options) {
			this.memberId = Number(options.memberId)
			this.getAddressList()
		},
		methods: {
			async getAddressList() {
				var res = await this.$request({
					url: `member/memberreceiveaddress/${this.memberId}/addresses`,
					params: {},
					type: 'GET'
				})
				this.addressList = res
				this.addressList.forEach(item => {
					item['checked'] = true
				})
				this.targetList = this.addressList
			},
			editAddress(item) {
				uni.redirectTo({
					url: `addressCRUD?oldAddress=${encodeURIComponent(JSON.stringify(item))}&memberId=${this.memberId}`
				})
			},
			addAddress() {
				uni.redirectTo({
					url: `addressCRUD?memberId=${this.memberId}`
				})
			},
			//删除地址
			delAddress(id) {
				var params = [id.toString()]
				params = JSON.stringify(params)
				this.$request({
					baseURL:`http://192.168.42.101:88/`,
					url:`member/memberreceiveaddress/delete/`,
					params:params,
					type:"DELETE"
				}).then(res=>{
					console.log('res',res)
					if(res.code != 500){
						return true
					}else{
						return false
					}
				}).catch(err=>{
					console.log('err',err)
				})
			},
			changeAll() {
				this.isChecked = !this.isChecked
				if(this.isChecked){
					this.addressList.forEach(item => {
						item.checked = true
					})
				}else{
					this.addressList.forEach(item => {
						item.checked = false
					})
					console.log(this.addressList)
				}
			},
			hasSelected() {
					var that = this
					that.targetList = that.addressList.filter(item=>{
						return item.checked == true
					})
					if(that.targetList.length==0){
						uni.showToast({
						    title: '请选择地址项',
								icon:'none'
						});
						return false
					}
					return true
			},
			delSelected() {
				var that = this
				if(this.hasSelected()==true){
					uni.showModal({
					cancelText:'取消',
					content:'是否移除?',
					confirmText:'确定',
					success(res) {
						if(res.confirm){
							that.targetList.forEach(target=>{
								var index = that.addressList.indexOf(target)
								that.addressList.splice(index,1)
								if(that.delAddress(target.id)){
									uni.showToast({
										title:'移除成功',
										icon:'none'
									})
								}
							})
						}
					}
				})
				}
			},
			itemSelect(item){
				item.checked=!item.checked
				var isAllChecked = this.addressList.every(item=>{
					return item.checked == true
				})
				isAllChecked?this.isChecked=true:this.isChecked=false
			},
		}
	}
</script>

<style>
	.sx-check {
		transform:  scale(0.9);
	}
	.caozuo {
		display: flex;
		width: 750upx;
		height: 80upx;
		position: fixed; // 无论怎么滚动,位置都固定
		margin-top: 0.5upx;
		background-color: white;
		justify-content: space-between; // 向两边对齐
		align-items: center; // 纵向居中
		padding-left: 10upx;
		padding-right: 30upx;
		/* 	height: 80upx;
		line-height: 80upx;
		display: flex;
		align-items: center;
		padding: 0 10upx;
		z-index: 900;
		position: relative;
		background-color: #fff; */
	}

	.cart-ycontent {
		display: flex;
		flex-direction: column; // 竖向排列
		justify-content: space-between; // 上下靠边
		padding-top: 20upx;
		padding-bottom: 20upx;
	}
	
	.card-item {
		display: flex;
		justify-content: space-between;
		padding: 30upx,30upx,30upx,30upx;
		margin-top: 5upx;
	}
	
	.cart-content {
		width: 750upx;
		height: 482upx;
		padding-top: 80upx;
	}
	
	.card-item-title {
		font-size: 110%;
		font-weight: bold;
	}
	
	.cart-ycontent {
		display: flex;
		flex-direction: column; // 竖向排列
		justify-content: space-between; // 上下靠边
		padding-top: 20upx;
		padding-bottom: 20upx;
	}
	.barfixed {
			position: fixed;
			bottom: 0upx;
			width: 750upx;
		}
</style>
